<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>RunJS</title>
	<link id="bootstrap_css_221" rel="stylesheet" type="text/css" class="library" href="../js/bootstrap-2.3.2/css/bootstrap.min.css">
	<script id="jquery_172" type="text/javascript" class="library" src="../js/jq/1.8/jquery-1.8.3.min.js"></script>
	<script id="bootstrap_js_221" type="text/javascript" class="library" src="../js/bootstrap-2.3.2/js/bootstrap.min.js"></script>
	<script id="others_angular_105" type="text/javascript" class="library" src="../js/angular-1.0.5/angular.js"></script>
	<script type="text/javascript">
		function caculatorCtrl($scope) {
			$scope.clearExp = function() {
				$scope.exp = '';
			}
			$scope.getExpValue = function() {
				var val = null;
				try {
					if (!$scope.exp) {
						val = '等待输入表达式...';
					} else {
						val = $scope.$eval($scope.exp);
					}
				} catch (ex) {
					console.log(ex);
				}
				if (!val && val != 0) {
					val = '无法计算表达式【' + $scope.exp + "】的值"
				};
				return val;
			}
		}
	</script>
</head>
<body ng-app>
	<form class="form-horizontal" ng-controller="caculatorCtrl">
		<fieldset>
			<legend>
				<h3>计算器(Powered by AngularJS)</h3>
			</legend>
			<div class="control-group">
				<label class="control-label">输入表达式：</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" ng-model="exp" placeholder="输入表达式" /> 
						<input type='button' class='btn' value="清除" ng-click="clearExp()" />
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">计算结果：</label>
				<div class="controls">
					<span style="text-align: left" class="help-inline">{{getExpValue()}}</span>
				</div>
			</div>
		</fieldset>
	</form>
</body>
</html>